<template>
  <view class="content">
    <view class="header">
      <text class="title">通用组件演示</text>
      <text class="subtitle">微信小程序通用组件示例</text>
    </view>
    
    <!-- 网络状态组件 -->
    <view class="demo-section">
      <view class="section-title">网络状态组件</view>
      <NetworkStatus :show="true" type="offline" />
      <NetworkStatus :show="true" type="online" />
    </view>
    
    <!-- 加载组件 -->
    <view class="demo-section">
      <view class="section-title">加载组件</view>
      <button @click="showLoading = !showLoading" class="demo-btn">
        {{ showLoading ? '隐藏' : '显示' }}加载组件
      </button>
      <Loading :show="showLoading" text="正在加载数据..." :is-overlay="true" />
    </view>
    
    <!-- 提示框组件 -->
    <view class="demo-section">
      <view class="section-title">提示框组件</view>
      <view class="button-group">
        <button @click="showToast('info')" class="demo-btn">信息提示</button>
        <button @click="showToast('success')" class="demo-btn success">成功提示</button>
        <button @click="showToast('error')" class="demo-btn error">错误提示</button>
        <button @click="showToast('warning')" class="demo-btn warning">警告提示</button>
      </view>
      <Toast :show="toastShow" :text="toastText" :type="toastType" position="center" />
    </view>
    
    <!-- 模态框组件 -->
    <view class="demo-section">
      <view class="section-title">模态框组件</view>
      <button @click="showModal = true" class="demo-btn">显示模态框</button>
      <Modal 
        :show="showModal"
        title="提示"
        content="这是一个模态框示例，您可以点击确定或取消按钮。"
        @confirm="onModalConfirm"
        @cancel="onModalCancel"
      />
    </view>
    
    <!-- 图片上传组件 -->
    <view class="demo-section">
      <view class="section-title">图片上传组件</view>
      <ImageUpload 
        :max-count="4"
        @change="onImageChange"
        @error="onImageError"
      />
    </view>
    
    <!-- 上拉加载更多组件 -->
    <view class="demo-section">
      <view class="section-title">上拉加载组件</view>
      <LoadMore status="loading" />
      <LoadMore status="noMore" />
      <LoadMore status="error" @retry="onLoadMoreRetry" />
    </view>
    
    <!-- 倒计时组件 -->
    <view class="demo-section">
      <view class="section-title">倒计时组件</view>
      <view class="countdown-demo">
        <text>距离2026年还有：</text>
        <Countdown :target-time="new Date('2026-01-01').getTime()" />
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue'
// 导入通用组件
import Loading from '../components/loading.vue'
import Toast from '../components/toast.vue'
import Modal from '../components/modal.vue'
import NetworkStatus from '../components/network-status.vue'
import LoadMore from '../components/load-more.vue'
import ImageUpload from '../components/image-upload.vue'
import Countdown from '../components/countdown.vue'

// 响应式数据
const showLoading = ref(false)
const toastShow = ref(false)
const toastText = ref('')
const toastType = ref('info')
const showModal = ref(false)

// 方法
const showToast = (type) => {
  toastType.value = type
  switch (type) {
    case 'success':
      toastText.value = '操作成功'
      break
    case 'error':
      toastText.value = '操作失败'
      break
    case 'warning':
      toastText.value = '警告信息'
      break
    default:
      toastText.value = '这是一条提示信息'
  }
  toastShow.value = true
  
  // 3秒后自动隐藏
  setTimeout(() => {
    toastShow.value = false
  }, 3000)
}

const onModalConfirm = () => {
  showModal.value = false
  showToast('success')
}

const onModalCancel = () => {
  showModal.value = false
}

const onImageChange = (imageList) => {
  console.log('图片列表变化:', imageList)
}

const onImageError = (error) => {
  console.error('图片上传错误:', error)
  showToast('error')
}

const onLoadMoreRetry = () => {
  console.log('重试加载更多')
  showToast('info')
}
</script>

<style scoped>
.content {
  padding: 20rpx;
  background-color: #f5f5f5;
  min-height: 100vh;
}

.header {
  text-align: center;
  margin-bottom: 40rpx;
  padding: 40rpx 0;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 20rpx;
  color: white;
}

.title {
  font-size: 48rpx;
  font-weight: bold;
  display: block;
  margin-bottom: 20rpx;
}

.subtitle {
  font-size: 32rpx;
  opacity: 0.9;
}

.demo-section {
  background-color: white;
  border-radius: 20rpx;
  margin-bottom: 40rpx;
  padding: 30rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);
}

.section-title {
  font-size: 36rpx;
  font-weight: bold;
  margin-bottom: 30rpx;
  color: #333;
  padding-bottom: 20rpx;
  border-bottom: 1rpx solid #eee;
}

.demo-btn {
  background-color: #007aff;
  color: white;
  border: none;
  padding: 20rpx;
  margin: 10rpx;
  border-radius: 10rpx;
  font-size: 28rpx;
}

.demo-btn.success {
  background-color: #4cd964;
}

.demo-btn.error {
  background-color: #dd524d;
}

.demo-btn.warning {
  background-color: #f0ad4e;
}

.button-group {
  display: flex;
  flex-wrap: wrap;
  gap: 10rpx;
}

.countdown-demo {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20rpx;
  background-color: #f9f9f9;
  border-radius: 10rpx;
}

.countdown-demo text {
  margin-bottom: 20rpx;
  font-size: 28rpx;
  color: #666;
}
</style>